<template>
  <div>
    <!-- 顶部标题 -->
    <mt-header
      title="发现"
      style="background-color: #fff; color: black; font-size: 20px"
    >
    </mt-header>
    <!-- 顶部导航 -->
    <van-tabs v-model="active" sticky>
      <van-tab title="特有料" style="padding: 0 10px">
        <!-- 轮播图 -->
        <mt-swipe
          style="height: 56vw; margin-top: 10px"
          :speed="200"
          :auto="5000"
        >
          <mt-swipe-item>
            <img
              style="height: 100%; width: 100%"
              src="../assets/ZlwImg/1.jpg"
            />
          </mt-swipe-item>
          <mt-swipe-item>
            <img
              style="height: 100%; width: 100%"
              src="../assets/ZlwImg/2.jpg"
            />
          </mt-swipe-item>
          <mt-swipe-item>
            <img
              style="height: 100%; width: 100%"
              src="../assets/ZlwImg/3.jpg"
            />
          </mt-swipe-item>
          <mt-swipe-item>
            <img
              style="height: 100%; width: 100%"
              src="../assets/ZlwImg/4.jpg"
            />
          </mt-swipe-item>
        </mt-swipe>
        <!-- 文章列表 -->
        <article-item
          v-for="item in dataList"
          :key="item.id"
          :article="item"
          @click.native="$router.push('/article?id=' + item.xw_id)"
        ></article-item>
      </van-tab>
      <!-- 商城 -->
      <van-tab title="商城">
        <div class="search">
          <van-search
            v-model="value"
            shape="round"
            background="#f2786b"
            placeholder="搜出好商品"
          />
        </div>

        <van-grid :column-num="5" :border="false">
          <van-grid-item icon="/store_imgs/grid_4.jpg" text="新品专区" />
          <van-grid-item icon="/store_imgs/grid_2.jpg" text="特价专区" />
          <van-grid-item icon="/store_imgs/grid_1.jpg" text="PLUS专区" />
          <van-grid-item icon="/store_imgs/grid_5.jpg" text="店铺公告" />
          <van-grid-item icon="/store_imgs/grid_3.jpg" text="关于店铺" />
        </van-grid>

        <van-card  v-for="item in data" :key="item.pro_id"
          :origin-price="item.pro_price"
          :price="item.pro_price"
          :title="item.pro_name"
          :thumb="item.pro_avatar"
          footer="/store_imgs/GouWuChe.jpg"
        >
          <template #footer>
            <van-icon name="/store_imgs/GouWuChe.jpg" size="30" />
          </template> </van-card
        ><van-card
          origin-price="109900"
          price="109900"
          title="特来电160KW一体式直流充电桩"
          thumb="/store_imgs/product_1.jpg"
          footer="/store_imgs/GouWuChe.jpg"
        >
          <template #footer>
            <van-icon name="/store_imgs/GouWuChe.jpg" size="30" />
          </template> </van-card
        ><van-card
          origin-price="109900"
          price="109900"
          title="特来电160KW一体式直流充电桩"
          thumb="/store_imgs/product_1.jpg"
          footer="/store_imgs/GouWuChe.jpg"
        >
          <template #footer>
            <van-icon name="/store_imgs/GouWuChe.jpg" size="30" />
          </template> </van-card
        ><van-card
          origin-price="109900"
          price="109900"
          title="特来电160KW一体式直流充电桩"
          thumb="/store_imgs/product_1.jpg"
          footer="/store_imgs/GouWuChe.jpg"
        >
          <template #footer>
            <van-icon name="/store_imgs/GouWuChe.jpg" size="30" />
          </template> </van-card
        ><van-card
          origin-price="109900"
          price="109900"
          title="特来电160KW一体式直流充电桩"
          thumb="/store_imgs/product_1.jpg"
          footer="/store_imgs/GouWuChe.jpg"
        >
          <template #footer>
            <van-icon name="/store_imgs/GouWuChe.jpg" size="30" />
          </template> </van-card
        ><van-card
          origin-price="109900"
          price="109900"
          title="特来电160KW一体式直流充电桩"
          thumb="/store_imgs/product_1.jpg"
          footer="/store_imgs/GouWuChe.jpg"
        >
          <template #footer>
            <van-icon name="/store_imgs/GouWuChe.jpg" size="30" />
          </template> </van-card
        ><van-card
          origin-price="109900"
          price="109900"
          title="特来电160KW一体式直流充电桩"
          thumb="/store_imgs/product_1.jpg"
          footer="/store_imgs/GouWuChe.jpg"
        >
          <template #footer>
            <van-icon name="/store_imgs/GouWuChe.jpg" size="30" />
          </template> </van-card
        ><van-card
          origin-price="109900"
          price="109900"
          title="特来电160KW一体式直流充电桩"
          thumb="/store_imgs/product_1.jpg"
          footer="/store_imgs/GouWuChe.jpg"
        >
          <template #footer>
            <van-icon name="/store_imgs/GouWuChe.jpg" size="30" />
          </template> </van-card
        ><van-card
          origin-price="109900"
          price="109900"
          title="特来电160KW一体式直流充电桩"
          thumb="/store_imgs/product_1.jpg"
          footer="/store_imgs/GouWuChe.jpg"
        >
          <template #footer>
            <van-icon name="/store_imgs/GouWuChe.jpg" size="30" />
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import ArticleItem from "@/components/ArticleItem.vue";
export default {
  components: { ArticleItem },
  data() {
    return {
      data:'',
      active: 0,
      dataList: "",
      value: "",
      images: [
        "/store_imgs/product_1.jpg",
        "/store_imgs/product_1.jpg",
        "/store_imgs/product_1.jpg",
        "/store_imgs/product_1.jpg",
        "/store_imgs/product_1.jpg",
      ],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      var url = "http://127.0.0.1:3000/xinwen/select?";
      this.axios.get(url).then((res) => {
        console.log("res:", res.data.r);
        this.dataList = res.data.r;
      });
      var url2="http://127.0.0.1:3000/shangpin/selectqb"
      this.axios.get(url2).then((res) => {
        console.log("r:", res.data.r);
        this.data = res.data.r;
         });
    },
  },
};
</script>

<style lang="scss" scoped>
.item {
  width: 30vw;
}
.news {
  border-bottom: 1px solid gray;
  padding-bottom: 5px;
}
p {
  margin: 0px;
}
.wenzhang {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
}
.item img {
  width: 20vw;
  height: 10vh;
}
</style>
